{% extends "custom_admin/base.html" %}

{% block title %}用户组管理{% endblock %}

{% block content %}
<div class="page-heading">
    <h4><i class="fas fa-users me-2"></i>用户组管理</h4>
</div>

<div class="card mb-4">
    <div class="card-body">
        <div class="d-flex justify-content-between flex-wrap mb-3">
            <div class="mb-2">
                <a href="{% url 'custom_admin:user_group_create' %}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i>创建用户组
                </a>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>用户组名称</th>
                        <th>用户组编码</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user_group in user_groups %}
                    <tr>
                        <td>{{ user_group.name }}</td>
                        <td>{{ user_group.code }}</td>
                        <td>{{ user_group.description|truncatewords:10 }}</td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{% url 'custom_admin:user_group_edit' user_group.pk %}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="{% url 'custom_admin:user_group_delete' user_group.pk %}" class="btn btn-sm btn-outline-danger">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="text-center">暂无用户组</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}